<template>
  <div class="community-summary">
    <ContentBox class="community-summary__indicator" :has-corner="true">
      <div class="community-summary__indicator__left">
        <div class="item">
          <div class="text">
            <div class="value">{{ item.buildingCount }}</div>
            <div class="unit">栋</div>
          </div>
          <div class="label">
            <img :src="icon1" class="icon" />
            <span>楼栋数</span>
          </div>
        </div>
        <div class="item">
          <div class="text">
            <div class="value">{{ item.houseCount }}</div>
            <div class="unit">户</div>
          </div>
          <div class="label">
            <img :src="icon1" class="icon" />
            <span>小区户数</span>
          </div>
        </div>
        <div class="item">
          <div class="text">
            <div class="value">{{ item.personCount}}</div>
            <div class="unit">人</div>
          </div>
          <div class="label">
            <img :src="icon2" class="icon custom-width" />
            <span>小区总人数</span>
          </div>
        </div>
        <div class="item">
          <div class="text">
            <div class="value">{{ item.areaCount}}</div>
            <div class="unit">
              m
              <sup>2</sup>
            </div>
          </div>
          <div class="label">
            <img :src="icon1" class="icon" />
            <span>小区面积</span>
          </div>
        </div>
      </div>
      <div class="community-summary__indicator__middle">
        {{ item.community }}
        <div class="community-summary__indicator__middle_bg">
          <img src="~@/assets/text_bg.png" alt />
        </div>
      </div>
      <div class="community-summary__indicator__right">
        <div class="item">
          <div class="text">
            <div class="value">{{ item.ioCount }}</div>
            <div class="unit"></div>
          </div>
          <div class="label">
            <img :src="icon1" class="icon" />
            <span>出入口数</span>
          </div>
        </div>
        <div class="item">
          <div class="text">
            <div class="value">{{ item.gridCount }}</div>
            <div class="unit"></div>
          </div>
          <div class="label">
            <img :src="icon2" class="icon custom-width" />
            <span>网格员数</span>
          </div>
        </div>
        <div class="item">
          <div class="text">
            <div class="value">{{ item.rank }}</div>
            <div class="unit">名</div>
            <div class="value">{{ item.score }}</div>
            <div class="unit">分</div>
          </div>
          <div class="label">
            <img :src="icon3" class="icon" />
            <span>小区季度综合排名</span>
          </div>
        </div>
      </div>
    </ContentBox>
    <div class="community-summary__detail">
      <div class="community-summary__detail__left">
        <div class="item">
          <div class="label">建成时间</div>
          <div class="text">{{ item.buildDate }}</div>
        </div>
        <div class="item">
          <div class="label">接手时间</div>
          <div class="text">{{ item.receiveDate }}</div>
        </div>
        <div class="item">
          <div class="label">物业公司</div>
          <div class="text">{{ item.propertyCompany }}</div>
        </div>
      </div>
      <div class="community-summary__detail__middle">
        <span>{{ item.street }}</span> |
        <span>{{ item.communityBelong }}</span>
      </div>
      <div class="community-summary__detail__right">
        <div class="item">
          <div class="label">负责人</div>
          <div class="text">{{ item.owner }}</div>
        </div>
        <div class="item">
          <div class="label">是否可封闭</div>
          <div class="text">{{ item.closeStr }}</div>
        </div>
        <div class="item">
          <div class="label">是否改造</div>
          <div class="text">{{ item.reformStr }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import Icon1 from '@/assets/icon-1.png'
import Icon2 from '@/assets/icon-2.png'
import Icon3 from '@/assets/icon-3.png'

export default {
  name: 'CommunitySummary',
  components: {
    ContentBox
  },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      icon1: Icon1,
      icon2: Icon2,
      icon3: Icon3
    }
  }
}
</script>

<style lang="scss">
.community-summary {
  color: $value_c;
  padding-left: $base * 40px;
  padding-right: $base * 40px;
  // padding-top: 30px;
  .community-summary__indicator {
    display: flex;
    align-items: center;
    padding-top: $base * 13px;
    padding-bottom: $base * 13px;
    // justify-content: center;
    .item {
      text-align: center;
      .text {
        display: flex;
        align-items: baseline;
        justify-content: center;
        font-size: $base * 30px;
        .unit {
          font-size: $base * 14px;
          sup {
            font-size: $base * 12px;
          }
        }
      }
      .label {
        font-size: $base * 12px;
        color: #fff;
        display: flex;
        justify-content: center;
        margin-top: $base * 6px;
      }
      img {
        width: $base * 15px;
        vertical-align: top;
        margin-right: $base * 4px;
      }
    }
    .community-summary__indicator__left {
      flex: 1;
      display: flex;
      justify-content: space-around;
    }
    .community-summary__indicator__middle {
      flex-shrink: 0;
      font-size: $base * 54px;
      // margin-top: -18px;
      line-height: 1;
      font-family: STXingkai;
      position: relative;
      .community-summary__indicator__middle_bg {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: $base * -27px;
        width: $base * 153px;
        img {
          width: 100%;
        }
      }
    }
    .community-summary__indicator__right {
      flex: 1;
      display: flex;
      justify-content: space-around;
    }
  }
  .community-summary__detail {
    display: flex;
    border-radius: $base * 100px;
    box-sizing: border-box;
    border: $base * 2px solid $bg_b;
    background: $bg;
    padding-top: $base * 6px;
    padding-bottom: $base * 6px;
    margin-top: $base * 6px;
    .item {
      // flex: 1;
      display: flex;
      align-items: center;
      font-size: $base * 12px;

      .text {
        color: #fff;
        padding-left: $base * 8px;
      }
    }
    .community-summary__detail__left {
      display: flex;
      flex: 1;
      justify-content: space-around;
    }
    .community-summary__detail__middle {
      font-size: $base * 16px;
      flex-shrink: 0;
    }
    .community-summary__detail__right {
      display: flex;
      flex: 1;
      justify-content: space-around;
    }
  }

  .custom-width {
    width: $base * 22px;
  }
}
</style>